<template>
	<view class="container">
		<!-- 页面头部 -->
		<view class="header">
			<view class="title">意见反馈</view>
			<view class="subtitle">您的建议是我们进步的动力</view>
		</view>
		
		<!-- 反馈表单 -->
		<view class="feedback-form">
			<!-- 反馈类型 -->
			<view class="form-item">
				<view class="form-label">反馈类型</view>
				<view class="form-content">
					<view class="type-options">
						<view 
							class="type-option" 
							v-for="(item, index) in feedbackTypes" 
							:key="index"
							:class="{active: currentType === index}"
							@click="selectType(index)"
						>
							<text>{{item}}</text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 反馈内容 -->
			<view class="form-item">
				<view class="form-label">反馈内容</view>
				<view class="form-content">
					<textarea 
						class="feedback-content" 
						v-model="content" 
						placeholder="请详细描述您遇到的问题或建议..." 
						maxlength="500"
					></textarea>
					<view class="word-count">{{content.length}}/500</view>
				</view>
			</view>
			
			<!-- 联系方式 -->
			<view class="form-item">
				<view class="form-label">联系方式（选填）</view>
				<view class="form-content">
					<input class="contact-input" v-model="contact" placeholder="请留下您的手机号或邮箱，方便我们回复" />
				</view>
			</view>
			
			<!-- 上传截图 -->
			<view class="form-item">
				<view class="form-label">上传截图（选填）</view>
				<view class="form-content">
					<view class="image-list">
						<view class="image-item" v-for="(item, index) in imageList" :key="index">
							<image class="uploaded-image" :src="item" mode="aspectFill"></image>
							<text class="delete-btn" @click="deleteImage(index)">×</text>
						</view>
						<view class="image-item add-image" v-if="imageList.length < 3" @click="uploadImage">
							<text class="add-icon">+</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 提交按钮 -->
		<view class="button-area">
			<button class="submit-btn" @click="submitFeedback">提交反馈</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				feedbackTypes: ['功能建议', '内容错误', '操作问题', '其他反馈'],
				currentType: 0,
				content: '',
				contact: '',
				imageList: []
			}
		},
		methods: {
			// 选择反馈类型
			selectType(index) {
				this.currentType = index;
			},
			
			// 上传图片
			uploadImage() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						this.imageList.push(res.tempFilePaths[0]);
					}
				});
			},
			
			// 删除图片
			deleteImage(index) {
				this.imageList.splice(index, 1);
			},
			
			// 提交反馈
			submitFeedback() {
				if (this.content.trim() === '') {
					uni.showToast({
						title: '请输入反馈内容',
						icon: 'none'
					});
					return;
				}
				
				uni.showLoading({
					title: '提交中...'
				});
				
				// 构建反馈数据
				const feedback = {
					type: this.feedbackTypes[this.currentType],
					content: this.content,
					contact: this.contact,
					images: this.imageList,
					create_time: new Date().getTime()
				};
				
				// 模拟提交操作
				setTimeout(() => {
					uni.hideLoading();
					uni.showToast({
						title: '反馈提交成功',
						icon: 'success',
						duration: 2000
					});
					
					// 重置表单
					setTimeout(() => {
						this.content = '';
						this.contact = '';
						this.imageList = [];
						uni.navigateBack();
					}, 1500);
				}, 1500);
				
				// 实际开发中，可以调用云函数或API接口提交反馈
				// uniCloud.callFunction({
				// 	name: 'submitFeedback',
				// 	data: feedback,
				// 	success: (res) => {
				// 		uni.hideLoading();
				// 		if (res.result.code === 0) {
				// 			uni.showToast({
				// 				title: '反馈提交成功',
				// 				icon: 'success'
				// 			});
				// 			setTimeout(() => {
				// 				this.content = '';
				// 				this.contact = '';
				// 				this.imageList = [];
				// 				uni.navigateBack();
				// 			}, 1500);
				// 		} else {
				// 			uni.showToast({
				// 				title: res.result.message || '提交失败，请重试',
				// 				icon: 'none'
				// 			});
				// 		}
				// 	},
				// 	fail: (err) => {
				// 		uni.hideLoading();
				// 		uni.showToast({
				// 			title: '提交失败，请重试',
				// 			icon: 'none'
				// 		});
				// 	}
				// });
			}
		}
	}
</script>

<style>
	.container {
		min-height: 100vh;
		background-color: #F8F8F8;
		display: flex;
		flex-direction: column;
	}
	
	/* 头部样式 */
	.header {
		background-color: #1BAE76;
		padding: 40rpx 30rpx;
		color: #FFFFFF;
	}
	
	.title {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}
	
	.subtitle {
		font-size: 24rpx;
		opacity: 0.8;
	}
	
	/* 表单样式 */
	.feedback-form {
		padding: 30rpx;
	}
	
	.form-item {
		margin-bottom: 30rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		padding: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}
	
	.form-label {
		font-size: 28rpx;
		color: #333333;
		font-weight: bold;
		margin-bottom: 20rpx;
	}
	
	.form-content {
		position: relative;
	}
	
	/* 反馈类型样式 */
	.type-options {
		display: flex;
		flex-wrap: wrap;
	}
	
	.type-option {
		width: calc(50% - 20rpx);
		height: 80rpx;
		margin: 10rpx;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		border: 1rpx solid #DDDDDD;
		color: #666666;
	}
	
	.type-option.active {
		background-color: #1BAE76;
		color: #FFFFFF;
		border-color: #1BAE76;
	}
	
	/* 反馈内容样式 */
	.feedback-content {
		width: 100%;
		height: 240rpx;
		font-size: 28rpx;
		color: #333333;
		line-height: 1.5;
		padding: 20rpx;
		border: 1rpx solid #EEEEEE;
		border-radius: 8rpx;
		box-sizing: border-box;
	}
	
	.word-count {
		position: absolute;
		right: 20rpx;
		bottom: 10rpx;
		font-size: 24rpx;
		color: #999999;
	}
	
	/* 联系方式样式 */
	.contact-input {
		width: 100%;
		height: 80rpx;
		font-size: 28rpx;
		color: #333333;
		padding: 0 20rpx;
		border: 1rpx solid #EEEEEE;
		border-radius: 8rpx;
		box-sizing: border-box;
	}
	
	/* 图片上传样式 */
	.image-list {
		display: flex;
		flex-wrap: wrap;
	}
	
	.image-item {
		width: 160rpx;
		height: 160rpx;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		position: relative;
	}
	
	.uploaded-image {
		width: 100%;
		height: 100%;
		border-radius: 8rpx;
	}
	
	.delete-btn {
		position: absolute;
		top: -20rpx;
		right: -20rpx;
		width: 40rpx;
		height: 40rpx;
		background-color: rgba(0, 0, 0, 0.5);
		color: #FFFFFF;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
	}
	
	.add-image {
		border: 1rpx dashed #DDDDDD;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.add-icon {
		font-size: 60rpx;
		color: #DDDDDD;
	}
	
	/* 按钮样式 */
	.button-area {
		padding: 30rpx;
		margin-top: auto;
	}
	
	.submit-btn {
		background-color: #1BAE76;
		color: #FFFFFF;
		font-size: 32rpx;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 45rpx;
		border: none;
	}
</style> 